<!DOCTYPE html>
<html lang="en">
<head>
    <title>Leaflet</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="lib/leaflet.css" type="text/css">
    <link rel="stylesheet" href="style/map.css" type="text/css">
    <script src="lib/leaflet.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
    var map = L.map('map', {
        preferCanvas: true
    }).setView([107.11040599933166, 34.26271532332011].reverse(), 4);
    L.tileLayer('http://localhost:8081/amap256/{z}/{x}/{y}.png').addTo(map);

    fetch('points.geojson').then(res => res.json()).then(data => {
        L.geoJSON(data, {
            pointToLayer: function (feature, latlng){
                return L.circleMarker(latlng, {
                    radius: 5,
                    fillColor: "#ff0000",
                    fillOpacity: 0.5,
                    color: "#ff0000",
                    weight: 0,
                });
            }
        }).addTo(map);
    })
</script>
</body>
</html>